<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="tit">{{msg}}</title>
    <script type="text/javascript" src="../k1/vue.min.js"></script>
<!--    k5是个错误失败案例-->
</head>
<body>
    <div id="ask"><!--vue不能控制body和html的标签-->
        <!--鼠标左键-->
        <div :style="left_style" @click.left="mouseclick('左')">左1</div>
        <!--鼠标中键-->
        <div :style="middle_style" @click.middle="multiply(2,3)">中1</div>
        <!--鼠标右键-->
        <!--加prevent为了屏蔽浏览器自带右键-->
<!--        <div :style="right_style" @contextmenu.prevent="mouseclick('右')">右</div>-->
<!--        <div :style="right_style" @click="fun1(2,4)">右1</div>-->
<!--        <div :style="right_style" onclick="multiply(2,4)">右1</div>-->

<!--        <div>{{firs}}</div>-->
<!--        <div ></div>-->
    </div>


</body>
<script async type="module" src="js1.js"></script>

<script type="module">
    import { multiply } from './js1'
    // var a = argu(10);
    // var b = Obj.add(10);
    // var c = Obj.reduce(10);
    // console.log('index',a, b, c)
    multiply(2,3);
</script>


<script>
    // import { multiply } from './js1'
    // multiply()
    // var fun = multiply
    // fun()
    var vue = function (options){new Vue(options)};
    vue({
        el:'#tit',
        data:{
            msg:'Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle'
        }
    });
    var app = vue({
        el:'#ask',
        data:{
            left_style:{border:'solid 2px red',height:'200px'},
            right_style:{border:'solid 2px blue',height:'200px'},
            middle_style:{border:'solid 2px yellow',height:'200px'},
            // firs:firstName
        },

        methods:{
            mouseclick(where){
                // if(where ==='左')
                    alert('点击鼠标'+where+'键触发');
                    console.info(firstName);
            },
            // fun1(a, b) {
            //     multiply(a,b);
            // }
        }
    });

</script>


</html>
